<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/* 顶部div 搜索框 */
			#wrap{
				width: 100%;
				height: 80px;
				background-color: #eee;
				border: 1px solid #eee;
				position: sticky;			/* !!!!! 设置粘贴定位 */
				top: 50px;					/* 距离顶部 50px 固定 */
				/* z-index: 1000; */
			}
			/* 表单样式 */
			form{
				width: 500px;
				height: 40px;
				margin: 0 auto;
				margin-top: 20px;
			}
			/* 输入框 */
			#text{
				width: 396px;
				height: 36px;
				display: block;
				float: left;
			}
			/* 搜索按钮 */
			#sub{
				width: 100px;
				height: 40px;
				display: block;
				float: left;
				background-color: #3385FF;
				border: 1px solid #3385FF;
				color: white;
				cursor: pointer;
			}
			.box{
				width: 100%;
				height: 250px;
				line-height: 250px;
				margin: 0 auto;
				color: white;
				font-size: 100px;
				text-align: center;
			}
			#a1{background-color: #009966;}
			#a2{background-color: #3385FF}
			#a3{background-color: red}
			#a4{background-color: #ADFF2F;}
			#a5{background-color: aquamarine;}
			#a6{background-color: coral;}
			#a7{background-color: darkmagenta;}
		</style>
	</head>
	<body>
		<!-- div 填充 -->
		<div class="box" id="a1">1</div>
		<!-- 写入搜索框html代码 -->
		<div id="wrap">
			<form action="#" method="post">
				<input type="text" id="text" />
				<input type="submit" id="sub" value="搜索" />
			</form>
		</div>
		<div class="box" id="a2">2</div>
		<div class="box" id="a3">3</div>
		<div class="box" id="a4">4</div>
		<div class="box" id="a5">5</div>
		<div class="box" id="a6">6</div>
		<div class="box" id="a7">7</div>
	</body>
</html>